/** @type {import('tailwindcss').Config} */
module.exports = {
  // 使用class策略进行暗色模式切换，与主题存储兼容
  darkMode: 'class',
  // 告诉 Tailwind CSS 在哪些文件中查找使用的类名，用于 Tree Shaking （摇树优化），只打包实际使用的样式，减小最终 CSS 文件大小。
  content: [
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './app.vue',
    './error.vue',
  ],
  theme: {
    extend: {
      colors: {
        // Naive UI 亮色主题配色 - 基于官方 theme.light.json
        'primary-light': {
          50: '#e6f7ff',
          100: '#bae7ff',
          200: '#91d5ff',
          300: '#69c0ff',
          400: '#40a9ff',
          500: '#18a058', // 官方 primaryColor
          600: '#36ad6a', // 官方 primaryColorHover
          700: '#0c7a43', // 官方 primaryColorPressed
          800: '#0a5c33',
          900: '#073d22',
          950: '#041f11',
        },
        'info-light': {
          50: '#e6f7ff',
          100: '#bae7ff',
          200: '#91d5ff',
          300: '#69c0ff',
          400: '#40a9ff',
          500: '#2080f0', // 官方 infoColor
          600: '#4098fc', // 官方 infoColorHover
          700: '#1060c9', // 官方 infoColorPressed
          800: '#0d4a9f',
          900: '#0a3375',
          950: '#051a3a',
        },
        'success-light': {
          50: '#f6ffed',
          100: '#d9f7be',
          200: '#b7eb8f',
          300: '#95de64',
          400: '#73d13d',
          500: '#18a058', // 官方 successColor
          600: '#36ad6a', // 官方 successColorHover
          700: '#0c7a43', // 官方 successColorPressed
          800: '#0a5c33',
          900: '#073d22',
          950: '#041f11',
        },
        'warning-light': {
          50: '#fffbe6',
          100: '#fff1b8',
          200: '#ffe58f',
          300: '#ffd666',
          400: '#ffc53d',
          500: '#f0a020', // 官方 warningColor
          600: '#fcb040', // 官方 warningColorHover
          700: '#c97c10', // 官方 warningColorPressed
          800: '#a66208',
          900: '#7a4a05',
          950: '#4d2f03',
        },
        'error-light': {
          50: '#fff2f0',
          100: '#ffccc7',
          200: '#ffa39e',
          300: '#ff7875',
          400: '#ff4d4f',
          500: '#d03050', // 官方 errorColor
          600: '#de576d', // 官方 errorColorHover
          700: '#ab1f3f', // 官方 errorColorPressed
          800: '#8a1730',
          900: '#690f21',
          950: '#470a15',
        },
        // Naive UI 暗色主题配色 - 基于官方 theme.dark.json
        'primary-dark': {
          50: '#e6fffb',
          100: '#b3fff0',
          200: '#80ffe6',
          300: '#4dffdb',
          400: '#1affd1',
          500: '#63e2b7', // 官方暗色 primaryColor
          600: '#7fe7c4', // 官方暗色 primaryColorHover
          700: '#5acea7', // 官方暗色 primaryColorPressed
          800: '#2aa47d', // 官方暗色 primaryColorSuppl 对应色
          900: '#1a7a5e',
          950: '#0f4c3a',
        },
        'info-dark': {
          50: '#e6f7ff',
          100: '#bae7ff',
          200: '#91d5ff',
          300: '#69c0ff',
          400: '#40a9ff',
          500: '#70c0e8', // 官方暗色 infoColor
          600: '#8acbec', // 官方暗色 infoColorHover
          700: '#66afd3', // 官方暗色 infoColorPressed
          800: '#3889c5', // 官方暗色 infoColorSuppl 对应色
          900: '#2563eb',
          950: '#1e40af',
        },
        'success-dark': {
          50: '#e6fffb',
          100: '#b3fff0',
          200: '#80ffe6',
          300: '#4dffdb',
          400: '#1affd1',
          500: '#63e2b7', // 官方暗色 successColor
          600: '#7fe7c4', // 官方暗色 successColorHover
          700: '#5acea7', // 官方暗色 successColorPressed
          800: '#2aa47d', // 官方暗色 successColorSuppl 对应色
          900: '#1a7a5e',
          950: '#0f4c3a',
        },
        'warning-dark': {
          50: '#fffbe6',
          100: '#fff7cc',
          200: '#fff099',
          300: '#ffe866',
          400: '#ffe033',
          500: '#f2c97d', // 官方暗色 warningColor
          600: '#f5d599', // 官方暗色 warningColorHover
          700: '#e6c260', // 官方暗色 warningColorPressed
          800: '#f08a00', // 官方暗色 warningColorSuppl 对应色
          900: '#d97706',
          950: '#b45309',
        },
        'error-dark': {
          50: '#fff2f0',
          100: '#ffccc7',
          200: '#ffa39e',
          300: '#ff7875',
          400: '#ff4d4f',
          500: '#e88080', // 官方暗色 errorColor
          600: '#e98b8b', // 官方暗色 errorColorHover
          700: '#e57272', // 官方暗色 errorColorPressed
          800: '#d03a52', // 官方暗色 errorColorSuppl 对应色
          900: '#b91c1c',
          950: '#991b1b',
        },
        // 通用颜色 - 基于 Naive UI 中性色
        'gray': {
          50: '#fafafa',
          100: '#f5f5f5',
          200: '#e8e8e8',
          300: '#d9d9d9',
          400: '#bfbfbf',
          500: '#8c8c8c',
          600: '#595959',
          700: '#434343',
          800: '#262626',
          900: '#1f1f1f',
          950: '#141414',
        },
      },
      fontFamily: {
        sans: ['Helvetica', 'Arial', 'Inter', 'system-ui', 'sans-serif'],
        mono: ['JetBrains Mono', 'Consolas', 'Monaco', 'monospace'],
      },
      fontSize: {
        '2xs': ['0.625rem', { lineHeight: '0.75rem' }],
      },
      spacing: {
        18: '4.5rem',
        88: '22rem',
        128: '32rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
      boxShadow: {
        soft: '0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)',
        medium:
          '0 4px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
        hard: '0 10px 40px -10px rgba(0, 0, 0, 0.15), 0 20px 25px -5px rgba(0, 0, 0, 0.1)',
      },
      animation: {
        'fade-in': 'fadeIn 0.5s ease-in-out',
        'slide-up': 'slideUp 0.3s ease-out',
        'slide-down': 'slideDown 0.3s ease-out',
        'bounce-soft': 'bounceSoft 1s infinite',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { transform: 'translateY(10px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        slideDown: {
          '0%': { transform: 'translateY(-10px)', opacity: '0' },
          '100%': { transform: 'translateY(0)', opacity: '1' },
        },
        bounceSoft: {
          '0%, 100%': { transform: 'translateY(-5%)' },
          '50%': { transform: 'translateY(0)' },
        },
      },
      backdropBlur: {
        xs: '2px',
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
  ],
};
